<template>
  <DLayout
    :menuList="MenusData"
    :title="title"
    :user-name="userName"
    :logo="logo"
    @tab-click="tabClick"
    @menu-open="menuOpen"
    @menu-close="menuClose"
    @logout="logout"
  >
    <div class="pf-main pf-flex-1">
      <router-view v-slot="{ Component }">
        <!--离场无动画-->
        <transition
          mode="out-in"
          appear
          enter-active-class="animate__animated animate__fadeIn"
          leave-active-class=""
        >
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </DLayout>
</template>

<script lang="ts">
import { ElMessageBox } from 'element-plus';
import { computed, defineComponent, inject, onMounted, reactive } from 'vue';
import { Crumb, ResponseCodeEnum, SysMenu, useAuth, useHttpClient } from 'pf-component';
import { useNotice } from '@/components/element-plus/notice';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import store from '@/store';

export default defineComponent({
  name: 'Main',
  setup() {
    const router = useRouter();
    const MenusData = computed(() => {
      return store.getters['menus/allMenus'];
    });
    const title = computed(() => {
      return store.getters.currentAppName;
    });

    const tabClick = (e: Crumb) => {
      router.push(e.fullpath);
    };
    const menuOpen = () => {
      console.log('menuopen.........');
    };
    const menuClose = () => {
      console.log('menu close.........');
    };
    const logout = () => {
      ElMessageBox.confirm('退出当前用户，是否确认？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          /*点击确认*/
          useAuth()
            .logout()
            .then(res => {
              if (res) {
                window.location.reload();
              } else {
                useNotice().message.error('登出失败！');
              }
            });
        })
        .catch(err => {
          console.error(err);
        });
    };
    const logo = require('@/assets/images/logo.png');
    const userName = computed(() => {
      return `${store.getters.pfUserInfo.userName}  ${store.getters.currentTenName}`;
    });
    return {
      tabClick,
      logout,
      menuOpen,
      menuClose,
      MenusData,
      userName,
      title,
      logo
    };
  }
});
</script>
<style scoped lang="scss">
:deep(.pf-top) {
  height: 50px;
  line-height: 50px;
}
.#{$prefix} {
  &-main {
    margin: 10px 10px 0px 10px;
    padding: 0;
    overflow-y: auto;
  }
}
</style>
